import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hktk_app/util/view_util.dart';

/// 推荐的自定义tab样式
class TabDecoration extends Decoration {
  /// tab对应下标
  final int tabIndex;

  /// tab总数
  final int total;

  const TabDecoration({
    required this.tabIndex,
    required this.total,
  });

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _TabPainter(this, tabIndex, total);
  }
}

class _TabPainter extends BoxPainter {
  final TabDecoration tabDecoration;

  /// tab对应下标
  final int tabIndex;

  /// tab总数
  final int total;

  _TabPainter(this.tabDecoration, this.tabIndex, this.total);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    var size = configuration.size;

    /// 左边 x坐标
    double leftX = offset.dx;

    /// 上边 y坐标
    double topY = offset.dy - 6;

    /// 底部 y坐标
    double bottomY = topY + size!.height + 8;

    /// 右边 x坐标
    double rightX = leftX + size.width;

    // 这里是渐变边框的路径
    Path path = _tabPath(
      leftX: leftX,
      topY: topY,
      rightX: rightX,
      bottomY: bottomY,
    );

    Paint paintBorder = Paint();
    paintBorder.style = PaintingStyle.fill;
    paintBorder.shader = const LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [colorBlue1, colorWhite1]).createShader(path.getBounds());

    canvas.drawPath(path, paintBorder);

    // 绘制路径里边内容
    Path path1 = _tabPath(
      leftX: leftX,
      topY: topY,
      rightX: rightX,
      bottomY: bottomY,
      borderWidth: 2,
    );

    Paint paintColor = Paint()
      ..color = colorWhite1
      ..strokeWidth = 2
      ..style = PaintingStyle.fill;

    canvas.drawPath(path1, paintColor);
  }

  /// 获取tab 对应样式方法，
  /// leftX 左边 x坐标，
  /// topY 顶部 y坐标，
  /// rightX 右边 x坐标，
  /// bottomY 底部 y坐标，
  /// borderWidth 边框宽度，
  Path _tabPath({
    required double leftX,
    required double topY,
    required double rightX,
    required double bottomY,
    double borderWidth = 0,
  }) {
    Path path = Path();

    if (tabIndex == 0) {
      // 这里绘制的是左边tab的图像
      // 左边线
      path.moveTo(leftX + borderWidth, bottomY);
      path.lineTo(leftX + borderWidth, topY + borderWidth + 30);
      path.quadraticBezierTo(leftX + borderWidth, topY + borderWidth,
          leftX + borderWidth + 30, topY + borderWidth);
      // 中间线
      path.lineTo(rightX - borderWidth - 40, topY + borderWidth);
      // 右边显示，这里判断只有一个tab时的显示情况
      if (total == 1) {
        // 右边竖直显示
        path.quadraticBezierTo(rightX - borderWidth, topY + borderWidth,
            rightX - borderWidth, topY + borderWidth + 30);
        path.lineTo(rightX - borderWidth, bottomY);
      } else {
        // 右边斜向滑动显示
        path.quadraticBezierTo(rightX - borderWidth, topY + borderWidth,
            rightX - borderWidth, topY + borderWidth + 20);
        path.lineTo(rightX - borderWidth + 10, topY + borderWidth + 80);
        path.quadraticBezierTo(rightX - borderWidth + 10, bottomY,
            rightX - borderWidth + 62, bottomY);
      }
    } else if (tabIndex > 0 && tabIndex < total - 1) {
      // 这里绘制的是中间tab的图像
      // 左边线
      path.moveTo(leftX + borderWidth - 62, bottomY);
      path.quadraticBezierTo(leftX + borderWidth - 10, bottomY,
          leftX + borderWidth - 10, topY + borderWidth + 80);
      path.lineTo(leftX + borderWidth, topY + borderWidth + 20);
      path.quadraticBezierTo(leftX + borderWidth, topY + borderWidth,
          leftX + borderWidth + 40, topY + borderWidth);
      // 中间线
      path.lineTo(rightX - borderWidth - 40, topY + borderWidth);
      // 右边线
      path.quadraticBezierTo(rightX - borderWidth, topY + borderWidth,
          rightX - borderWidth, topY + borderWidth + 20);
      path.lineTo(rightX - borderWidth + 10, topY + borderWidth + 80);
      path.quadraticBezierTo(rightX - borderWidth + 10, bottomY,
          rightX - borderWidth + 62, bottomY);
    } else if (tabIndex == total - 1) {
      // 这里绘制的是右边tab的图像
      // 左边线
      path.moveTo(leftX + borderWidth - 62, bottomY);
      path.quadraticBezierTo(leftX + borderWidth - 10, bottomY,
          leftX + borderWidth - 10, topY + borderWidth + 80);
      path.lineTo(leftX + borderWidth, topY + borderWidth + 20);
      path.quadraticBezierTo(leftX + borderWidth, topY + borderWidth,
          leftX + borderWidth + 40, topY + borderWidth);
      // 中间线
      path.lineTo(rightX - borderWidth - 30, topY + borderWidth);
      // 右边线
      path.quadraticBezierTo(rightX - borderWidth, topY + borderWidth,
          rightX - borderWidth, topY + borderWidth + 30);
      path.lineTo(rightX - borderWidth, bottomY);
    }
    path.close();

    return path;
  }
}
class RoundedBackgroundDecoration extends Decoration {
  /// 背景颜色
  final Color color;

  /// 圆角半径
  final double borderRadius;

  const RoundedBackgroundDecoration({
    required this.color,
    required this.borderRadius,
  });

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _RoundedBackgroundPainter(this);
  }
}

class _RoundedBackgroundPainter extends BoxPainter {
  final RoundedBackgroundDecoration decoration;

  _RoundedBackgroundPainter(this.decoration);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final Rect rect = offset & configuration.size!;
    final Paint paint = Paint()
      ..color = decoration.color
      ..style = PaintingStyle.fill;

    final RRect rrect = RRect.fromRectAndRadius(
      rect,
      Radius.circular(decoration.borderRadius),
    );

    canvas.drawRRect(rrect, paint);
  }
}